<template>
  <div class="container">
    <header class="header">易厨优品</header>
    <div class="content" >
      <div class="nav">
				<ul>
					<a>调味酱料</a>
					<a>厨具</a>
					<a>烘焙</a>
					<a>厨房电器</a>
          <a>精选美食</a>
				</ul>
			</div>
      <van-pull-refresh v-model="isLoding" @refresh="onRefresh"  id='content'>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="list" >
            <h3>精选优品</h3>
            <prolist :prolist = "prolist" ></prolist>
          </div>
        </van-list>
      </van-pull-refresh>
      <div class="backtop" @click="backTop" v-show="flag">
        <van-icon name="upgrade" size="0.25rem"/>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload, List, PullRefresh, Icon } from 'vant'
import Prolist from '@/components/Prolist'
import { mapState, mapActions } from 'vuex'
Vue.use(Swipe).use(SwipeItem)
Vue.use(Lazyload)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(Icon)
export default {
  data () {
    return {
      pageCode: 1, // 多个组件共享状态的才会放入vuex
      loading: false,
      finished: false,
      isLoding: false,
      flag: false
    }
  },
  computed: {
    ...mapState({
      // bannerlist: ({ home: { bannerlist } }) => bannerlist,
      prolist: ({ market: { prolist } }) => prolist
    })
  },
  mounted () {
    document.getElementById('content').addEventListener('scroll', this.showTop)
    this.getProlist()
  },
  beforeRouteLeave (to, from, next) {
    const top = document.getElementById('content').scrollTop
    localStorage.setItem('position', top)
    next()
  },
  watch: {
    $route (val) {
      if (val.name === 'market') {
        document.getElementById('content').scrollTop = localStorage.getItem('position')
      }
    }
  },
  methods: {
    selectCity () {
      console.log('city')
    },
    ...mapActions({
      // getBannerlist: 'getBannerlist',
      getProlist: 'getProlist'
    }),
    backTop(){
      clearInterval(this.t)
      this.t = setInterval(()=>{
        document.getElementById('content').scrollTop -= document.getElementById('content').scrollTop / 10
        if (document.getElementById('content').scrollTop <= 10) {
          clearInterval(this.t)
          document.getElementById('content').scrollTop = 0
        }
      },30)
    },
    onRefresh () {
      this.isLoding = true
      this.getProlist().then(() => {
        this.isLoding = false
        this.pageCode = 1
        this.finished = false
      })
    },
    onLoad () {
      this.loading = true
      this.$store.dispatch('getMoreProList', { pageCode: this.pageCode }).then(data => {
        this.loading = false
        this.pageCode++
        if (data === 0) {
          this.finished = true
        }
      })
    },
    showTop(){
      const hide = document.getElementById('content').scrollTop
      if(hide >= 200){
        this.flag = true
      } else {
        this.flag = false
      }
    }
  },
  components: {
    prolist: Prolist
    // Header
  }
}
</script>

<style lang="scss" scoped>
@import "@/lib/reset.scss";

.container {
	@include rect(100%,100%);
	@include overflow(auto);
	.header {
		@include flexbox();
		@include justify-content();
    @include align-items();
    @include font-size(.18rem);
	}	
	.content {
		@include overflow(auto);
		@include flexbox();
		.nav {
			@include flexbox();
			@include flex-direction(column);
			ul {
				@include flexbox();
				@include justify-content(space-around)
			}
    }
    .van-pull-refresh {
      @include overflow(auto);
    }
    .list {
      h3 {
        text-align: center;
        margin-top: 0.2rem;
      }
    }
    .backtop {
      position: fixed;
      bottom: 0.6rem;
      right: 0.15rem;
      // background-color: #fff;
    }
  }	
}	
</style>